<template>
    <div class="mar-x-15 mar-t-20">
        <div>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="showAddMenu()">添加菜单</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="">删除菜单</el-button>
        </div>

        <el-table
            class="mar-t-10"
            v-loading="loading"
            :data="tableData"
            stripe
            row-key="menuId"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column width="50"></el-table-column>
            <el-table-column
                v-for="(item, index) in theadArr"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width ? item.width : 'auto'"
                :align="item.align"
            >
                <template #header="{ column }">
                    <span class="color-333333">{{ column.label }}</span>
                </template>

                <template #default="{ row }">
                    <div v-if="item.prop === 'title'">
                        <span>{{ row.meta.title }}</span>
                    </div>

                    <div v-else-if="item.prop === 'icon'">
                        <SvgIcons :iconClass="row.meta.icon" />
                    </div>

                    <div v-else-if="item.prop === 'fatherPath'">
                        <span>{{ row.meta.fatherPath }}</span>
                    </div>

                    <div v-else-if="item.prop === 'state'">
                        <el-switch
                            v-model="row[item.prop]"
                            :active-color="mainBgColor"
                            inactive-color="#cccccc"
                            :active-value="0"
                            :inactive-value="1"
                        />
                    </div>

                    <div v-else>
                        <span>{{ row[item.prop] }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="180" align="center">
                <template>
                    <div>
                        <span class="color-dc4444 cur-pointer">修改</span>
                        <span class="mar-x-10 mainColor cur-pointer">新增</span>
                        <span class="color-ff0000 cur-pointer">删除</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加菜单 -->
        <el-dialog
            title="添加菜单"
            :visible.sync="menu.show"
            width="700px"
            :close-on-click-modal="false"
        >
            <div>
                <div class="flex align-center">
                    <div class="flex align-center">
                        <span class="color-ff0000 mar-r-5">*</span>
                        <h4>菜单类型：</h4>
                    </div>

                    <div>
                        <el-radio v-for="(item, index) in menu.menuTypes" :key="index" v-model="menu.menuType" :label="item.type">{{ item.name }}</el-radio>
                    </div>
                </div>

                <div class="flex justify-between align-center mar-t-20">
                    <div class="flex align-center text-nowrap">
                        <div class="flex align-center">
                            <span class="color-ff0000 mar-r-5">*</span>
                            <h4>菜单图标：</h4>
                        </div>

                        <el-select v-model="menu.icon" filterable clearable size="small" placeholder="请选择菜单图标" style="width: 240px;">
                            <el-option
                                v-for="(item, index) in menu.iconList" :key="index"
                                :label="item"
                                :value="item"
                            >
                                <div class="flex align-center justify-between">
                                    <span>{{ item }}</span>
                                    <SvgIcons :iconClass="item" />
                                </div>
                            </el-option>
                        </el-select>
                    </div>

                    <div class="flex align-center text-nowrap">
                        <div class="flex align-center">
                            <span class="color-ff0000 mar-r-5">*</span>
                            <h4>菜单路由：</h4>
                        </div>

                        <el-input v-model="menu.path" placeholder="请输入菜单路由(如：/system)" size="small" clearable style="width: 240px;" />
                    </div>
                </div>

                <div class="flex justify-between align-center mar-t-20">
                    <div class="flex align-center text-nowrap">
                        <div class="flex align-center">
                            <span class="color-ff0000 mar-r-5">*</span>
                            <h4>菜单名称：</h4>
                        </div>

                        <el-input v-model="menu.title" placeholder="请输入菜单名称" size="small" clearable style="width: 240px;" />
                    </div>

                    <div class="flex align-center text-nowrap">
                        <div class="flex align-center">
                            <span class="color-ff0000 mar-r-5">*</span>
                            <h4>菜单排序：</h4>
                        </div>

                        <el-input-number v-model="menu.sort" placeholder="请输入排序号" size="small" controls-position="right" :min="1" style="width: 240px;" />
                    </div>
                </div>

                <div class="flex justify-between align-center mar-t-20">
                    <div class="flex align-center text-nowrap">
                        <div class="flex align-center">
                            <span class="color-ff0000 mar-r-5">*</span>
                            <h4>组件名称：</h4>
                        </div>

                        <el-input v-model="menu.name" placeholder="请输入组件名称(如：System)" size="small" clearable style="width: 240px;" />
                    </div>

                    <div class="flex align-center text-nowrap">
                        <div class="flex align-center">
                            <span class="color-ff0000 mar-r-5">*</span>
                            <h4>父级路由：</h4>
                        </div>

                        <el-input v-model="menu.fatherPath" placeholder="请输入父组件路由(如：/system)" size="small" clearable style="width: 240px;" />
                    </div>
                </div>

                <div class="flex align-center text-nowrap mar-t-20">
                    <div class="flex align-center">
                        <span class="color-ff0000 mar-r-5">*</span>
                        <h4>权限标识：</h4>
                    </div>

                    <el-input v-model="menu.permission" placeholder="请输入权限标识" size="small" clearable />
                </div>

                <div class="flex align-center text-nowrap mar-t-20">
                    <div class="flex align-center">
                        <span class="color-ff0000 mar-r-5">*</span>
                        <h4>是否外链：</h4>
                    </div>

                    <div>
                        <el-radio v-for="(item, index) in menu.links" :key="index" v-model="menu.link" :label="item.type">{{ item.name }}</el-radio>
                    </div>
                </div>

                <div class="flex align-center text-nowrap mar-t-20">
                    <div class="flex align-center">
                        <span class="color-ff0000 mar-r-5">*</span>
                        <h4>菜单状态：</h4>
                    </div>

                    <div>
                        <el-radio v-for="(item, index) in menu.status" :key="index" v-model="menu.state" :label="item.type">{{ item.name }}</el-radio>
                    </div>
                </div>
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeAddMenu()">取 消</el-button>
                <el-button size="small" type="primary" @click="handleAddMenu()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import SvgIcons from "@/components/SvgIcons"
    import variables from "@/assets/style/variable.module.scss"
    import { getRouters } from '@/apis/menuManage'
    // import Utils from '@/utils/utils'

    export default {
        name: 'MenuManage',
        
        components: {
            SvgIcons,
        },

        data() {
            return {
                // 主题色
                mainBgColor: variables.mainBgColor,
                mainColor: variables.mainColor,

                // 表格
                theadArr: [
                    { label: '菜单名称', prop: 'title', width: 'auto', align: 'center' },
                    { label: '图标', prop: 'icon', width: 'auto', align: 'center' },
                    { label: '排序', prop: 'sort', width: 'auto', align: 'center' },
                    { label: '权限标识', prop: 'permission', width: 180, align: 'center' },
                    { label: '菜单路由', prop: 'path', width: 300, align: 'center' },
                    { label: '组件名称', prop: 'name', width: 120, align: 'center' },
                    { label: '父级路由', prop: 'fatherPath', width: 120, align: 'center' },
                    { label: '状态', prop: 'state', width: 'auto', align: 'center' },
                    { label: '创建时间', prop: 'createTime', width: 180, align: 'center' }
                ],

                tableData: [],
                loading: false,

                // 添加菜单
                menu: {
                    show: false,

                    // 菜单类型
                    menuType: 0,
                    menuTypes: [
                        { type: 0, name: '主菜单' }
                    ],

                    // 菜单图标
                    icon: '',
                    iconList: [],

                    // 菜单名称
                    title: '',

                    // 菜单排序
                    sort: 0,

                    // 组件名称
                    name: '',

                    // 父组件路由
                    fatherPath: '',

                    // 权限标识
                    permission: '',

                    // 是否外链
                    link: 1,
                    links: [
                        { type: 0, name: '是' },
                        { type: 1, name: '否' }
                    ],

                    // 菜单状态
                    state: 0,
                    status: [
                        { type: 0, name: '正常' },
                        { type: 1, name: '停用' }
                    ],
                }
            }
        },

        created() {
            // 查询菜单列表
            this.findMenuList()
        },

        methods: {
            // 查询菜单列表
            async findMenuList() {
                // let data = [
                //     {
                //         id: 101,
                //         title: '系统',
                //         icon: 'icon-system',
                //         sort: 1,
                //         permission: 'admin',
                //         path: '/system',
                //         state: 0,
                //         name: 'System',
                //         fatherPath: '/system',
                //         createTime: '2023-10-20 16:17:22',
                //         children: [
                //             {
                //                 id: 201,
                //                 title: '菜单管理',
                //                 icon: 'icon-system',
                //                 sort: 1,
                //                 permission: 'admin',
                //                 path: '/systemManage/menuManage',
                //                 state: 0,
                //                 name: 'MenuManage',
                //                 fatherPath: '/system',
                //                 createTime: '2023-10-20 16:17:22',
                //             }
                //         ]
                //     }
                // ]

                this.loading = true

                let data = await getRouters().catch(() => {
                    this.loading = false
                })

                if (data) {
                    console.log(data.data)
                    this.tableData = data.data
                }

                this.loading = false
            },

            // pageSize 改变时的回调
            handleSizeChange(val) {
                this.pageSize = val
                this.findMenuList()
            },

            // currentPage 改变时的回调
            handleCurrentChange(val) {
                this.currentPage = val
                this.findMenuList()
            },

            // 显示添加菜单弹窗
            showAddMenu() {
                this.menu.show = true
                this.menu.iconList = this.getIcons()
            },

            // 获取 elelement-plus 图标列表
            getIcons() {
                const req = require.context('@/assets/icons/svg', false, /\.svg$/)
                const requireAll = requireContext => requireContext.keys().map(requireContext)

                let icons = requireAll(req)
                let iconNames = []

                icons.forEach(item => {
                    let iconName = item.default.id

                    iconName = iconName.substr(5, iconName.length - 1)
                    iconNames.push(iconName)
                })

                return iconNames
            },

            // 添加菜单
            addMenu() {
                
            },

            // 关闭添加菜单
            closeAddMenu() {
                this.menu.show = false
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/style/variable.module.scss";

    .mainColor {
        color: $mainColor;
    }
</style>